<template>
    <div class="box">
        <div class="box1">
            <van-icon name="list-switch" @click="tolist" />
            <searchs></searchs>
            登录
        </div>
        <lunbo :list="list"></lunbo>
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in navlist" :key="i">
                <van-image
                    :src="v.image_src ? v.image_src : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
            </van-grid-item>
        </van-grid>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">

            <van-grid :border="false" :column-num="2">
                <van-grid-item v-for="(v, i) in search" :key="i">
                    <van-image @click="todetail(v.goods_id)"
                        :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                    {{ v.goods_name }}
                </van-grid-item>
            </van-grid>
        </van-pull-refresh>
    </div>
</template>

<script setup>
import searchs from '@/components/searchs.vue';
import lunbo from '@/components/lunbo.vue';
import { ref } from 'vue'
import { swiperdataApi, catitemsApi, searchApi } from '@/api/api';
//轮播图
let list = ref([])
const getlist = () => {
    swiperdataApi().then((res) => {
        list.value = res.data.message
    })
}
getlist()
//点击跳转分类页
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const tolist = () => {
    router.push('/list')
}
//导航
let navlist = ref([])
const getnavlist = () => {
    catitemsApi().then((res) => {
        navlist.value = res.data.message
    })
}
getnavlist()
//瀑布流
let search = ref([])
const getsearch = () => {
    searchApi().then((res) => {
        search.value = res.data.message.goods
    })
}
getsearch()
//下拉刷新
import { showToast } from 'vant';
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        getsearch()
    }, 1000);
};
//点击跳转详情页
const todetail = (goods_id) => {
    router.push({ path: "/detail", query: { goods_id: goods_id } })
}
</script>

<style lang="scss" scoped>
.box1 {
    display: flex;
    align-items: center;
    justify-content: space-around;

}
</style>